<template>
	<div class="sales-rank">
		<div class="sales-rank__header">
			<span>班级扣课情况</span>
		</div>
		
		<div class="sales-rank__container">
			<div class="sales-rank__filter">
				<ul>
					<li
						v-for="(item, index) in types"
						:key="index"
						:class="{
							active: item.value == type
						}"
						@click="changeDate(item.value)"
					>
						{{ item.label }}
					</li>
				</ul>
				<el-select
					size="mini"
					clearable
					v-model="dateSummary"
					@change="searchSubmit"
					style="width: 150px;margin-right:10px"
				>
					<el-option :key="all" value="" label="全部"></el-option>
					<el-option
						v-for="item in class_date_list"
						:key="item.value"
						:value="item.value"
						:label="item.label"
					></el-option>
				</el-select>
				<el-date-picker
					v-model="date"
					class="hidden-xs-only"
					type="datetimerange"
					size="mini"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				/>
			</div>
			<br />
			<n-table :bordered="true" :single-line="true">
				<thead>
					<tr>
						<th>老师姓名</th>
						<th>分班数量</th>
						<th>上课班级数量</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>放弃</td>
						<td>反常的</td>
						<td>彻底废除</td>
					</tr>
					<tr>
						<td>...</td>
						<td>...</td>
						<td>...</td>
					</tr>
				</tbody>
			</n-table>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, ref } from "vue";
import { NTable } from "naive-ui";

export default defineComponent({
	components: {
		NTable
	},
	setup() {
			// 请求服务
		const service = inject<any>("service");
		const date = ref<Array<string>>([]);
		const type = ref<string>("day");
		const types = ref<Array<any>>([
			{
				label: "上周",
				value: "lassweek"
			},
			{
				label: "上月",
				value: "lassmonth"
			},
			{
				label: "本月",
				value: "month"
			},
			{
				label: "全年",
				value: "year"
			}
		]);

		const changeDate = (value: string) => {
			if (value === "lassweek"){
				let date = new Date();
				
				// alert(getTime(2))
			}
			type.value = value;
		};

		function getTime(n) {
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var day = now.getDay(); //返回星期几的某一天;
        n = day == 0 ? n + 6 : n + (day - 1)
        now.setDate(now.getDate() - n);
        let date = now.getDate();
        var s = year + "-" + (month < 10 ? ('0' + month) : month) + "-" + (date < 10 ? ('0' + date) : date);
        return s;
    }

		// 获取当前年份
		const getNowYear = function () {
			let date = new Date();
			date.getFullYear(); //获取完整的年份(4位)
			let season = "";
			if (date.getMonth() + 1 >=2  && date.getMonth() + 1 <= 7) {
				season = "春季";
			}else if ((date.getMonth() + 1 >=9  && date.getMonth() + 1 <= 12) || date.getMonth() + 1 === 1) {
				season = "秋季";
			}
			return date.getFullYear() + "年" + season;
		};

		const dateSummary = ref(getNowYear())


			// 定义班级日期
		const class_date_list = ref([]);
		// 获取班级日期
		const getClassDate = async function () {
			const res = await service.base.system.param.list({ keyName: "class_date" });
			// 将json字符串转换为json对象
			let classDate = eval("(" + res[0].data + ")");
			classDate.forEach((item) => {
				class_date_list.value.push({
					value: "" + item.value,
					label: item.label,
					type: "info"
				});
			});
		};
		onMounted(()=>{
			getClassDate()
		})

		return {
			changeDate,
			types,
			date,
			type,
			dateSummary,
			getNowYear,
			class_date_list
		};
	}
});
</script>

<style lang="scss" scoped>
.sales-rank {
	&__header {
		display: flex;
		align-items: center;
		height: 50px;
		font-size: 15px;
		font-weight: bold;
		padding: 0 20px;
	}

	&__container {
		padding: 0 20px;
	}

	&__filter {
		display: flex;
		align-items: center;
		height: 40px;

		ul {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 200px;
			margin-right: 20px;

			li {
				list-style: none;
				font-size: 14px;
				cursor: pointer;
				color: #d8d8d8;
				white-space: nowrap;
				margin-right: 10px;

				&.active {
					color: #000;
				}

				&:not(.active):hover {
					color: #999;
				}
			}
		}

		.el-date-editor {
			margin-left: 40px;
		}
	}

	&__list {
		height: 260px;

		li {
			display: flex;
			align-items: center;
			height: 52px;
			list-style: none;
			font-size: 13px;
			cursor: pointer;

			span {
				&:first-child {
					display: inline-block;
					height: 14px;
					width: 14px;
					border-radius: 14px;
					text-align: center;
					line-height: 14px;
					font-size: 12px;
				}

				&:nth-child(2) {
					flex: 1;
					margin: 0 10px;
					letter-spacing: 0.5px;
					color: #222;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
			}

			&:nth-last-child(n + 3) {
				span {
					&:first-child {
						background-color: #000;
						color: #fff;
					}
				}
			}

			&:hover {
				span:nth-child(2) {
					text-decoration: underline;
				}
			}
		}
	}
}
</style>
